<template>
	<view class="warp">
		<d-navBar title="购买记录" isSeat leftFn @leftFn="goBack"></d-navBar>
		<view class="content">
			<c-scroll-list ref="list" :api="api" :apiParams="apiParams" @load="load">
				<view class="record-box" v-for="(item,index) in numberList" :key="index">
					<view class="box1">
						<view class="box1-left">
							<image style="width: 48rpx;"
								:src="item.type==1?'../static/record1-icon.png':'../static/record2-icon.png'"
								mode="widthFix"></image>
							<text style="margin-left: 16rpx;">{{item.type==1?'庄主':'皇冠庄主'}}</text>
						</view>
						<view class="box1-right">
							￥{{item.payPrice}}
						</view>
					</view>
					<p class="p1">认领亩数：{{item.num}} 亩</p>
					<view class="box2">
						<view class="box2-left">
							<p>开通时间：{{item.startTime}}</p>
							<p>到期时间：{{item.endTime}}</p>
						</view>
						<view class="box2-right" @click="goAgreement(item.contractUrl)">
							查看合同
						</view>
					</view>
				</view>
			</c-scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apiParams: {
					"userId": uni.getStorageSync('user').userId
				}, //这是接口参数
				api: this.$api.memberList,
				numberList: [], //庄园订单列表
			}
		},
		onShow() {
			this.$refs.list.refresh()
		},
		methods: {
			goBack() {
				uni.redirectTo({
					url: '/pages/my/pages/ownerBuy'
				})
			},
			// 庄园订单列表
			load(res) {
				this.numberList = res.list
				console.log('庄园订单列表', res.list);


			},
			// 查看合同
			goAgreement(urlPdf) {
				uni.downloadFile({
					url: urlPdf,
					success: function(res) {
						console.log(res, "res");
						let filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								// console.log('打开文档成功');
								console.log(res, "打开文档成功");
								// uni.hideLoading()
							}
						});
					},
					fail(err) {
						console.log('打开文档失败', err);
						// uni.hideLoading()
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.warp {
		width: 100vw;
		height: 100vh;
		padding-top: 180rpx;
		box-sizing: border-box;
	}

	.content {
		width: 100%;

	}

	.record-box {
		margin: 0 auto;
		width: 710rpx;
		height: 236rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		// margin: 20 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-top: 20rpx;

		.box1 {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #1A1A1A;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box1-left {
				display: flex;
				align-items: center;
			}
		}

		.p1 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

		.box2 {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box2-right {
				width: 144rpx;
				height: 48rpx;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #2AD03D;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #2AD03D;
			}
		}
	}
</style>